<template>
  <div class="login-box">

    <h3 class="title">登录商城</h3>

    <div class="clear"></div>

    <div class="login-form">
      <form id="login-form" onsubmit="return false;" data-am-validator>
        <div class="user-name">
          <label for="user"><i class="am-icon-user"></i></label>
          <input type="text"
                 name=""
                 id="user"
                 placeholder="邮箱/手机/用户名"
                 v-model="username"
                 required>
        </div>
        <div class="user-pass">
          <label for="password"><i class="am-icon-lock"></i></label>
          <input type="password"
                 name=""
                 id="password"
                 placeholder="请输入密码"
                 v-model="password"
                 required>
        </div>
      </form>
    </div>

    <div class="login-links">
      <label for="remember-me">
        <input id="remember-me"
               type="checkbox"
               v-model="rememberMe">记住密码</label>
      <a href="#"
         class="am-fr">忘记密码</a>
      <a href="javascript:;"
         class="zcnext am-fr am-btn-default"
         @click="redirectRegisterPage">注册</a>
      <br>
    </div>
    <div class="am-cf">
      <input type="submit"
             name=""
             value="登 录"
             class="am-btn am-btn-primary am-btn-sm"
             @click="submit">
    </div>
    <div class="partner">
      <h3>合作账号</h3>
      <div class="am-btn-group">
        <li><a href="#"><i class="am-icon-qq am-icon-sm"></i><span>QQ登录</span></a></li>
        <li><a href="#"><i class="am-icon-weibo am-icon-sm"></i><span>微博登录</span> </a></li>
        <li><a href="#"><i class="am-icon-weixin am-icon-sm"></i><span>微信登录</span> </a></li>
      </div>
    </div>

  </div>
</template>

<script>

  // import UserApi from 'api/user'
  import { mapGetters, mapActions } from 'vuex'

  export default {
    name: 'LoginForm',
    created () {
      this.redirectTargetIfHasLogin()
    },
    mounted () {
      let self = this
      this.$('#login-form').validator({
        onValid: function (validity) {
          // $(validity.field).closest('.am-form-group').find('.am-alert').hide();
          self.valiadteResult = true
        },
        onInValid: function (validity) {
          self.valiadteResult = false
        }
      })
    },
    data () {
      return {
        username: '',
        password: '',
        rememberMe: true,
        valiadteResult: false
      }
    },
    methods: {
      ...mapActions({
        login: 'login'
      }),
      submit () {
        alert(`${this.username} - ${this.password} - ${this.rememberMe}`)
        if (!this.valiadteResult) {
          alert('验证失败')
          return
        }

        let params = {
          username: this.username,
          password: this.password,
          rememberMe: this.rememberMe
        }
        this.login(params)
      },
      redirectRegisterPage () {
        this.$router.push('/register')
      },
      redirectTargetIfHasLogin () {
        if (this.isLogin) {
          window.location.href = '/'
        } else {
          // ignore
        }
      }
    },
    computed: {
      ...mapGetters({
        isLogin: 'isLogin'
      })
    }
  }
</script>
